<template>
  <div class="within">
    <div class="fun-btn clear">
      <el-button size="small"
                 type="primary"
                 style="float: right"
                 icon="el-icon-back"
                 @click="$router.go(-1)">返回
      </el-button>
    </div>

    <ul v-loading="loading">
      <li v-for="(item, index) in listData"
          :key="index"
          @dblclick="handleToSee(item)"
          @contextmenu.prevent="rightClick(item)">
        <i class="el-icon-folder-opened"></i>
        <p>{{item.dh}}</p>
      </li>
    </ul>
    <click-right-menu v-show="menuVisible" @handleToSee="handleToSee(rowData)"></click-right-menu>
  </div>
</template>

<script>
import ClickRightMenu from '../../../../../components/clickRightMenu/clickRightMenu'
import { getDenseFrameArchivesInfo } from '../../../../../api/house/houseArchives'
export default {
  name: 'UpperArchives',
  components: { ClickRightMenu },
  // 上架的档案
  data () {
    return {
      loading: false,
      menuVisible: false,
      rowData: {},
      listData: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      const param = {
        params: [{
          name: 'idRow',
          op: 'eq',
          value: this.$route.query.idRow
        }, {
          name: 'idColumn',
          op: 'eq',
          value: this.$route.query.idColumn
        }]
      }
      this.loading = true
      getDenseFrameArchivesInfo(param).then(res => {
        this.listData = res.data.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    rightClick (item) {
      this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
      this.menuVisible = true // 显示模态窗口，跳出自定义菜单栏
      event.preventDefault() // 关闭浏览器右键默认事件
      var menu = document.querySelector('.menu')
      this.styleMenu(menu)
      this.rowData = item
    },
    foo () {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false
      document.removeEventListener('click', this.foo) // 关掉监听，
    },
    styleMenu (menu) {
      if (event.clientX > 1800) {
        menu.style.left = event.clientX - 100 + 'px'
      } else {
        menu.style.left = event.clientX + 1 + 'px'
      }
      document.addEventListener('click', this.foo) // 给整个document新增监听鼠标事件，点击任何位置执行foo方法
      if (event.clientY > 700) {
        menu.style.top = event.clientY - 30 + 'px'
      } else {
        menu.style.top = event.clientY - 10 + 'px'
      }
    },
    handleToSee (item) {
      if (this.item) {
        this.rowData = item
      }
      // 查看原文
      this.$router.push({
        path: '/warehouseArchives/readOriginalText',
        query: {
          id_record: item.idArc,
          idTable: item.idTable
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.within{
  ul{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    height: calc(100vh - 130px);
    overflow-y: auto;
    margin: 0 -20px;
    padding: 0 20px;
    li{
      text-align: center;
      margin: 10px;
      width: 140px;
      height: 150px;
      padding: 10px 0;
      cursor: pointer;
      border-radius: 4px;

      &:hover {
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
      }

      i {
        font-size: 98px;
      }

      p {
        font-size: 14px;
        color: #999;
        height: 32px;
      }
    }
  }

}

</style>
